<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>文物编辑</title>
        <style>
            /* 核心：新增loading样式（浮在弹窗中间，不影响布局） */
            #loading {
                display: none; /* 默认隐藏 */
                position: fixed; /* 固定定位，浮在最上层 */
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); /* 绝对居中 */
                z-index: 999; /* 压在弹窗上，不挡按钮禁用逻辑 */
                text-align: center;
            }

            .spinner {
                width: 40px;
                height: 40px;
                border: 4px solid #f0f0f0;
                border-top: 4px solid #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 0 auto; /* 加载圈居中 */
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            .loading-text {
                color: #333;
                font-size: 14px;
                margin-top: 8px;
            }

            /* 原有样式不变，省略... */
            body {
                margin: 0;
                padding: 20px;
                font-family: Arial, sans-serif;
                background: #f5f5f5;
            }

            .form-group {
                margin-bottom: 15px;
            }

            label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }

            input {
                width: 100%;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 4px;
            }

            .btn-container {
                display: flex;
                gap: 10px;
                margin-top: 20px;
            }

            button {
                cursor: pointer;
                font-family: "Microsoft YaHei";
                background: white;
                border: 1px solid #888;
                color: black;
                padding: 5px 15px;
                margin: 10px;
                text-align: center;
                border-radius: 15px;
                font-size: 14px;
                display: inline-block;
                line-height: normal;
            }

            button:hover {
                background: #f0f0f0;
                border-color: #666;
            }

            button:active {
                background: #666;
                color: #fff;
                border-color: #444;
            }

            /* 新增：按钮禁用样式（灰色+无手型） */
            button:disabled {
                cursor: not-allowed;
                background: #eee;
                color: #999;
                border-color: #ccc;
            }
        </style>
    </head>
    <body>
        <!-- 原有表单不变 -->
        <div class="form-group">
            <label for="editCode">文物编码</label>
            <input type="text" id="editCode">
        </div>
        <div class="form-group">
            <label for="editName">文物名称</label>
            <input type="text" id="editName">
        </div>
        <div class="form-group">
            <label for="editClassId1">城市id</label>
            <input type="text" id="editClassId1">
        </div>
        <div class="form-group">
            <label for="editClassId2">景区id</label>
            <input type="text" id="editClassId2">
        </div>
        <div class="btn-container">
            <button id="saveBtn" class="button">保存</button>
            <button id="cancelBtn" class="button">取消</button>
        </div>
        
        <!-- loading容器（默认隐藏） -->
        <div id="loading">
            <div class="spinner"></div>
            <div class="loading-text">保存中...</div>
        </div>
        
        <script src="../js/config.js"></script>
        <script>
            var apiBaseUrl = getApiBaseUrl();
            let id = null;
            // 获取按钮和loading元素（避免重复查询DOM）
            const saveBtn = document.getElementById('saveBtn');
            const cancelBtn = document.getElementById('cancelBtn');
            const loading = document.getElementById('loading');

            // 原有：接收父窗口数据（不变）
            window.addEventListener('message', (event) => {
                id = null;
                if (event.data.type === 'SET_DATA') {
                    id = event.data.id;
                    document.getElementById('editCode').value = event.data.code || '';
                    document.getElementById('editName').value = event.data.name || '';
                    document.getElementById('editClassId1').value = event.data.classId1 || '';
                    document.getElementById('editClassId2').value = event.data.classId2 || '';
                }
            });

            // 保存按钮点击事件（修改核心逻辑）
            saveBtn.addEventListener('click', async () => {
                // 显示loading + 禁用按钮（防止重复点击）
                loading.style.display = 'block';
                saveBtn.disabled = true;
                cancelBtn.disabled = true;

                try {
                    const data = {
                        type: 'SAVE_DATA',
                        id: id,
                        code: document.getElementById('editCode').value,
                        name: document.getElementById('editName').value,
                        classId1: document.getElementById('editClassId1').value,
                        classId2: document.getElementById('editClassId2').value
                    };
                    const res = await fetch(apiBaseUrl + '/updateArtifact', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        body: JSON.stringify(data)
                    });
                    const jsonData = await res.json();

                    if (!jsonData.code || !jsonData.data) {
                        throw new Error(jsonData.message || '服务器返回数据异常');
                    }
                    if (jsonData.code === 200) {
                        alert("修改成功！");
                        window.parent.postMessage({type: 'CLOSE_MODAL', refresh: true}, '*');
                    }
                    window.parent.postMessage(data, '*');
                } catch (err) {
                    // 新增：异常时也恢复按钮（避免用户卡住）
                    alert("保存失败：" + err.message);
                } finally {
                    // 无论成功/失败，都隐藏loading + 恢复按钮
                    loading.style.display = 'none';
                    saveBtn.disabled = false;
                    cancelBtn.disabled = false;
                }
            });

            // 取消按钮点击事件（不变）
            cancelBtn.addEventListener('click', () => {
                window.parent.postMessage({type: 'CLOSE_MODAL'}, '*');
            });
        
        </script>
    </body>
</html>